<template>
  <el-tag :style="`border-color: ${tagMap[tag]}`" :color="tagMap[tag]" effect="dark">{{ tag }}</el-tag>
</template>

<script setup>
const props = defineProps({
  tag: {
    type: String,
    required: true,
  },
})

const tagMap = {
  'A': 'oklch(72.3% 0.219 149.579)',
  'B': 'oklch(68.5% 0.169 237.323)',
  'C': 'oklch(62.7% 0.265 303.9)',
  'D': 'oklch(64.5% 0.246 16.439)',
}
</script>